<!DOCTYPE html>
<html>
  <head>
    <% include global/meta.html %>
    <% include global/top-css.html %>
    <title>yuscms</title>
</head>
  <body>

        <main class="main" data-info="<%=admin.permission%>">
          <div class="ys-admin-pos c-a1a3aa">
            首页<span class="f-sum">></span>
            <span class="c-565b6d">轮播管理</span>
            <span class="f-sum">></span>
            <span class="c-565b6d">更新</span>
          </div>
      
          <div class="ys-admin-tablist">
              <div class="ys-admin-tab-header row justify-content-b">
                  <p class="f-14 c-565b6d pl-8 pt-6"></p>
              </div>
      
              <div class="mr-10 ml-10" v-loading="loading">
                  <form @submit.prevent="checkForm" name="form">
                  <ul class="overflow-h pb-20">
                  
                      <li class="row pd-10 f-14">
                          <div class="col-hd">
                              <label class="label">轮&nbsp; 播&nbsp; 图</label>
                          </div>
                          
                          <div class="col-bd row c-666">
                              <img v-if="params.img" class="thumb" :src="params.img" alt="">
                              <span class="ico-camera"><input @change="sendThumb" type="file" name="img" id="thumb"></span>
                          </div>
                          <div class="col-ft col-16 c-999" id="thumb">
                              (缩略图必须是jpg,gif,png,并且200k之内)
                          </div>
                          
                      </li>
                       <li class="row  pd-10 f-14">
                          <div class="col-hd">
                              <label class="label">链　　接</label>
                          </div>
                          <div class="col-10">
                              <input type="text" name="url" v-model="params.url" placeholder="" class="input"/>
                          </div>
                      </li>
                      <li class="row  pd-10 f-14">
                          <div class="col-hd">
                              <label class="label">标　　题</label>
                          </div>
                          <div class="col-10">
                              <input type="text" name="title" v-model="params.title" placeholder="" class="input"/>
                          </div>
                      </li>
                      <li class="row pd-10 f-14">
                          <div class="col-hd">
                              <label class="label">轮播:</label>
                          </div>
                          <div class="col-bd">
                              <input type="radio" name="state" class="radio pos-r t-4 mr-5" v-model="params.state" value="1"/>
                              <span class="c-565b6d f-14 mr-15">开启</span>
                              <input type="radio" name="state" class="radio pos-r t-4 mr-5" v-model="params.state" value="0"/>
                              <span class="c-565b6d f-14">关闭</span>
                          </div>
                      </li>
                       <li class="row  pd-10 f-14">
                          <div class="col-hd">
                              <label class="label">描　　述</label>
                          </div>
                          <div class="col-10">
                              <textarea name="info" v-model="params.info" placeholder="" class="textarea"></textarea>
                          </div>
                      </li>
                      
                      <li class="pd-10 mt-35">
                          <div class="col-hd">
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          </div>
                          <div class="col-bd row ml-35">
                          <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布"/>
                          <input name="send" class="btn btn-reset ml-35" type="reset" value="重置"/>
                          </div>
                      </li>
                  </ul>
               </form>
              </div>
          </div>
        </main>
     
	<% include global/all-js.html %>
	<script>
		var vm = new Vue({
			el:'.main',
			data:{
        loading: true,
      params: {
        img: "",
        title: "",
        url: "",
        info: "",
        state: 0,
        id: $m.getParams('id')
      }
			},
			methods:{
			
        queryById() {
      let _this = this;
      axios
        .get("/api/admin/slide/queryById", {
          params: { id: _this.params.id }
        })
        .then(data => {
          let filterData = data.data;
          if (filterData.success) {
            _this.params = filterData.data[0];
          }
          _this.loading = false;
        })
        .catch(error => {
          console.error(error);
        });
    },
    sendThumb: function() {
      var _this = this;

      var formData = new FormData();
      formData.append("file", $("#thumb")[0].files[0]);
      var thumb = $("#thumb")
        .val()
        .split(".")[1];

      if (
        thumb != "jpg" &&
        thumb != "gif" &&
        thumb != "jpeg" &&
        thumb != "png"
      ) {
        tipsWarn(_this, "请上传图片！");
        return false;
      }

      if ($("#thumb")[0].files[0].size / 1000 > 200) {
        tipsWarn(_this, "缩略图不能超过200k");
        return false;
      }

      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };

      axios
        .post("/api/admin/slide/upload", formData, config)
        .then(data => {
          let filterData = data.data;
          _this.params.img = filterData.data[0];
        })
        .catch(error => {
          console.error(error);
        });
    },

    slideUpdate() {
      let _this = this;
      axios
        .post("/api/admin/slide/update", _this.params)
        .then(data => {
          let filterData = data.data;
          if (filterData.data.affectedRows === 1) {
            tips(_this, "更新成功^_^");
            _this.$router.go(-1);
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    checkForm: function() {
      var _this = this;

      if (!hasPermission("4")) {
        tipsWarn(_this, "对不起,您没有操作权限^_^");
        return;
      }
      
      var fm = document.form;

      var _this = this;
      if (_this.params.img.length == "") {
        tipsWarn(_this, "图片路径不得为空！^_^");
        fm.img.focus();
        return false;
      }

      if (_this.params.url.length == "") {
        tipsWarn(_this, "链接不得为空!^_^");
        fm.url.focus();
        return false;
      }

      if (_this.params.title.length > 20) {
        tipsWarn(_this, "标题不得大于20位!^_^");
        fm.title.focus();
        return false;
      }

      if (_this.params.info.length > 200) {
        tipsWarn(_this, "描述不能大于200位!^_^");
        fm.title.focus();
        return false;
      }

      _this.slideUpdate();
    }
  },

  created: function() {
    this.queryById();
  },
  mounted: function() {}
		});
	</script>	
	</body>
</html>
